<template>
  <div v-if="pal_id == 0">
  <el-container >
    <el-aside width="90%" :class="{ 'to-left': PalBox, 'to-right': !PalBox }">
      <el-table
        :data="tableData"
        height="400"
        border="true"
        stripe="true"
        style="width: 100%"
        highlight-current-row = "true"
        show-overflow-tooltip>
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="description"
          label="Description">
        </el-table-column>
        <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index)">请求绑定</el-button>
              </template>
        </el-table-column>
      </el-table>
    </el-aside>
    <el-main :class="{ 'to-left': !PalBox, 'to-right': PalBox }">
      <el-table
        :data="tableData2"
        height="400"
        border="true"
        stripe="true"
        style="width: 100%"
        highlight-current-row ="true"
        show-overflow-tooltip>
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="description"
          label="Description">
        </el-table-column>
        <el-table-column label="操作" width="360">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="accept(scope.$index)">同意绑定</el-button>

                <el-button
                  size="mini"
                  @click="reject(scope.$index)">拒接绑定</el-button>
              </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>

    <el-row>
      <el-col :span="3">
        <el-button style="margin-top: 30px;" type="primary" icon="el-icon-refresh-left" @click = "show" round >换一批</el-button>
      </el-col>
      <el-col :span="3" :offset="18">
        <el-button style="margin-top: 30px;" type="primary" icon="el-icon-refresh-left" @click = "showPalBox" round :disabled="has_pal">切换显示</el-button>
      </el-col>
    </el-row>
  </div>
  <div v-else-if="pal_id != 0">
    <el-row>
      <el-col :span="3" :offset="12">
        <el-button style="margin-top: 60px;" type="primary" icon="el-icon-delete-solid" @click = "dismiss" round></el-button>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import axios from 'axios'
  import Global from "../global.vue"
  export default {
    created:function(){
      this.show()
    },
    methods:{
      dismiss(){
        alert("将要解除和当前好友的绑定！！！");
        localStorage.setItem("user_penpal_id",0);
        this.$router.go(0);
        var _this = this;
        var _uid = localStorage.getItem("user_id");
        var token = localStorage.getItem("token");
            //向服务器提交数据
          axios.post(
            'http://oneday.vaiwan.com/pal/cancel/'+_uid,{},{headers: {  token: `${token}`  }}
          )
                    .then(function(response) {
                          //成功时服务器返回 response 数据
                        localStorage.setItem("user_penpal_id",0);
                        console.log(response.data)
                        this.$router.go(0);
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
          },
      showPalBox(){
        var _this = this;
        this.PalBox =! this.PalBox;
        var _uid = localStorage.getItem("user_id");
        var token = localStorage.getItem("token");
        if(this.PalBox){
          //向服务器提交数据
              axios.post(
              'http://oneday.vaiwan.com/pal/showPalBox/'+_uid,{},{headers: {  token: `${token}`  }}
              )
                  .then(function(response) {
                        //成功时服务器返回 response 数据
                      _this.tableData2 = response.data.data;
                      console.log(response.data)
                  })
                  .catch(function(error) {
                      console.log(error);
                      alert("请重新登录！");
                      _this.$router.push("/");
                  });
        }
      },
      handleEdit(index){
        console.log(index);
        var _rid = parseInt(this.tableData[index].id)
        var _sid = localStorage.getItem("user_id")
        var token = localStorage.getItem("token");
        var _this = this;
            //向服务器提交数据
          axios.post('http://oneday.vaiwan.com/pal/send',{
            rid:_rid,
            sid:_sid
          },{headers: {  token: `${token}`  }})
              .then(function(response) {
                    //成功时服务器返回 response 数据
                  alert(response.data.msg)
              })
              .catch(function(error) {
                  console.log(error);
                  alert("请重新登录！");
                  _this.$router.push("/");
              });
      },
      accept(index){
        if(confirm("每个用户只能绑定一个好友哦")){
          console.log(index);
          var _sid = parseInt(this.tableData2[index].id)
          var _rid_ = localStorage.getItem("user_id")
          var _rid = parseInt(_rid_)
          var token = localStorage.getItem("token");
          var _this = this;
              //向服务器提交数据
            axios.post('http://oneday.vaiwan.com/pal/confirm',{
              rid:_rid,
              sid:_sid
            },{headers: {  token: `${token}`  }})
                .then(function(response) {
                      //成功时服务器返回 response 数据
                    console.log(response);
                    localStorage.setItem("user_penpal_id",_sid);
                    alert(response.data.msg);
                    this.$router.go(0);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
      },
      reject(index){
        if(confirm("确定要拒绝TA绑定申请吗？")){
          console.log(index);
          var _sid = parseInt(this.tableData2[index].id)
          var _rid_ = localStorage.getItem("user_id")
          var _rid = parseInt(_rid_)
          var token = localStorage.getItem("token");
          var _this = this;
              //向服务器提交数据
            axios.post('http://oneday.vaiwan.com/pal/reject',{
              rid:_rid,
              sid:_sid
            },{headers: {  token: `${token}`  }})
                .then(function(response) {
                      //成功时服务器返回 response 数据
                    alert(response.data.msg);
                    this.$router.go(0);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
      },
      show(){
        var _this = this;
        var _uid2 = localStorage.getItem("user_id")
        var token = localStorage.getItem("token");
            //向服务器提交数据
          axios.post('http://oneday.vaiwan.com/pal/show/'+_uid2,{},{
            headers: {  token: `${token}`  }
          })
              .then(function(response) {
                    //成功时服务器返回 response 数据
                  _this.tableData = response.data.data;
              })
              .catch(function(error) {
                  console.log(error);
                  alert("请重新登录！");
                  _this.$router.push("/");
              });
      },
    },
    data() {
      return {
        has_pal:false,
        PalBox :false,
        pal_id: localStorage.getItem("user_penpal_id"),
        tableData: [{
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }],
        tableData2: [{
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }, {
          id: '0',
          name: 'Kirby',
          description: '我是卡比，来和我一起冒险叭！'
        }]
      }
    }
  }
</script>
<style>
  .to-left{
    animation-duration: 1s;
    animation-name: to-left;
    animation-fill-mode: forwards;
  }

  @keyframes to-left{
    from{
      width: 90%;
    }
    to{
      width: 10%;
      border: 1px solid ;
      border-radius: 5px;
    }
  }

  .to-right{
    animation-duration: 1s;
    animation-name: to-right;
    animation-fill-mode: forwards;
  }

  @keyframes to-right{
    from{
      width: 10%;
    }
    to{
      width: 90%;
      border: 5px solid ;
      border-radius: 5px;
    }
  }

</style>
